<script setup lang="ts">
import {Dayjs} from "dayjs";
import BatchSelection from "~/contentScripts/views/wxt/components/BatchSelection.vue";
import DateRangeSelection from "~/contentScripts/views/wxt/components/DateRangeSelection.vue";
import RefreshButton from "~/contentScripts/views/wxt/components/RefreshButton.vue";
import {WxtBizCode, WxtPageFields, WxtUtils} from "~/contentScripts/views/wxt/lib/wxtUtils";
import AccurateCrowdPlanTable
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/AccurateCrowdPlanTable.vue";
import AccurateCrowdResourceAllocation
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/AccurateCrowdResourceAllocation.vue";
import BudgetBiddingMethod from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/BudgetBiddingMethod.vue";
import DeletePlan from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/DeletePlan.vue";
import OperationRecords from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/OperationRecords.vue";
import PlacementArea from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PlacementArea.vue";
import PlanningGroup from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PlanningGroup.vue";
import ProfitLossCalculator
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ProfitLossCalculator.vue";
import PromotionStatus from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/PromotionStatus.vue";
import ProvincialOptimization
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ProvincialOptimization.vue";
import ReportComparison from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ReportComparison.vue";
import ResourceAllocation from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/ResourceAllocation.vue";
import TimeDiscount from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/TimeDiscount.vue";
import WeatherRegionOptimization
  from "~/contentScripts/views/wxt/SuperOptimization/KeywordPromotion/WeatherRegionOptimization.vue";

const props = defineProps({
  adzoneList: {
    type: Array as PropType<any[]>,
    default: () => [],
  },
});
const campaignGroupFindListData = ref([]);
const loadGroup = () => {
  WxtUtils.campaignGroupFindList(WxtBizCode.精准人群推广).then(res => {
    campaignGroupFindListData.value = res.data.data.list;
  });
}
loadGroup();
const data = ref<any[]>([]);
const loading = ref(false);
const loadCampaignHorizontalFindPage = async (offset: number = 0, pageSize: number = 100) => {
  if (offset === 0) {
    rows.value = [];
    loading.value = true;
  }
  WxtUtils.campaignHorizontalFindPage(adZonePkgIdList.value, dateRange.value[0].format('YYYY-MM-DD'), dateRange.value[1].format('YYYY-MM-DD'), WxtBizCode.精准人群推广, WxtPageFields.精准人群推广).then(res => {
    res.data.data.list.map((l: any) => {
      if (l.adgroupList) {
        l.adgroupCount = l.adgroupList.length || 0;
      }else {
        l.adgroupCount = 0;
      }
      l.showTagListName = l.showTagList.map((t: any) => t.name).join(',');
      if (l.reportInfoList) {
        // 间接ROI
        l.reportInfoList[0].indirRoi = l.reportInfoList[0].roi - l.reportInfoList[0].dirRoi;
        // 直接转化率
        l.reportInfoList[0].dirCvr = l.reportInfoList[0].alipayDirNum / l.reportInfoList[0].click;
        // 间接转化率
        l.reportInfoList[0].indirCvr = l.reportInfoList[0].alipayIndirNum / l.reportInfoList[0].click;

        // 直接加购率
        l.reportInfoList[0].dirAddRate = l.reportInfoList[0].cartDirNum / l.reportInfoList[0].click;
        // 间接加购率
        l.reportInfoList[0].indirAddRate = l.reportInfoList[0].cartIndirNum / l.reportInfoList[0].click;

        // 直接收藏率
        l.reportInfoList[0].dirFavRate = l.reportInfoList[0].itemColDirNum / l.reportInfoList[0].click;
        // 间接收藏率
        l.reportInfoList[0].indirFavRate = l.reportInfoList[0].itemColIndirNum / l.reportInfoList[0].click;
        //  直接收藏加购率
        l.reportInfoList[0].dirFavAddRate = l.reportInfoList[0].dirFavRate + l.reportInfoList[0].dirAddRate;
        // 间接收藏加购率
        l.reportInfoList[0].indirFavRate = l.reportInfoList[0].indirFavRate + l.reportInfoList[0].indirAddRate;
      }
    });
    const d = res.data.data.list;
    if (d.find(e => e.campaignGroupId == null)) {
      const nullGroup = {
        campaignGroupId: null,
        campaignGroupName: '未分组',
      };
      // 将未分组的计划放在最前面 如果有未分组的计划组不需要这个
      if (!campaignGroupFindListData.value.find(e => e.campaignGroupId == null)) {
        if (campaignGroupFindList.value.length == campaignGroupFindListData.value.length) {
          campaignGroupFindList.value.push(nullGroup.campaignGroupId);
        }
        campaignGroupFindListData.value.unshift(nullGroup);
      }
    }
    // 过滤不在计划组中的计划
    if (campaignGroupFindList.value.length) {
      data.value = d.filter((item: any) => {
        return campaignGroupFindList.value.includes(item.campaignGroupId);
      });
    } else {
      data.value = data.value.concat(d);
    }
    if (res.data.data.list.length === pageSize) {
      loadCampaignHorizontalFindPage(offset + pageSize, pageSize);
    }
    // console.log('数据', res)
  }).finally(() => {
    loading.value = false;
  });
}
const rows = ref<any[]>([]);
const adZonePkgIdList = ref<any[]>([])
const campaignGroupFindList = ref<any[]>([])
const dateRange = ref<Dayjs[]>([])
watch(() => dateRange.value, (val) => {
  if (val.length == 2 && adZonePkgIdList.value.length) {
    nextTick(() => loadCampaignHorizontalFindPage());
  }
}, {
  deep: true
})
watch(() => adZonePkgIdList.value, (val) => {
  if (val.length) {
    nextTick(() => loadCampaignHorizontalFindPage());
  }
}, {
  deep: true
})
watch(() => campaignGroupFindList.value, (val) => {
  if (val.length) {
    nextTick(() => loadCampaignHorizontalFindPage());
  }
}, {
  deep: true
})
</script>

<template>
  <a-row style="padding-bottom: 10px;" type="flex" :gutter="10">
    <a-col>
      <a-space>
        <BatchSelection :items="WxtUtils.adZonePkgIdList" name="流量来源" v-model:value="adZonePkgIdList" confirm/>
        <BatchSelection v-if="campaignGroupFindListData.length" :items="campaignGroupFindListData" name="计划组"
                        v-model:value="campaignGroupFindList" value-name="campaignGroupId"
                        label-name="campaignGroupName"
        />
        <DateRangeSelection name="日期" v-model:value="dateRange"/>
      </a-space>
    </a-col>
    <a-col flex="1" style="overflow-x: auto;">
      <a-space>
        <RefreshButton :loading="loading" @refresh="loadCampaignHorizontalFindPage"/>
        <ProfitLossCalculator/>
        <!--        <BatchOptimizationPlan :rows="rows"/>-->
        <ReportComparison :rows="rows" :biz-code="WxtBizCode.精准人群推广" :date-range="dateRange"
                          :pageFields="WxtPageFields.精准人群推广"
        />
        <PlanningGroup :rows="rows" :biz-code="WxtBizCode.精准人群推广" @load-group="loadGroup"/>
        <AccurateCrowdResourceAllocation :rows="rows" :biz-code="WxtBizCode.精准人群推广"
                                         :static-ad-pkg-lists="adzoneList"
                                         @refresh="loadCampaignHorizontalFindPage"
        />
        <PlacementArea :rows="rows" :biz-code="WxtBizCode.精准人群推广"/>
        <ProvincialOptimization :rows="rows" @refresh="loadCampaignHorizontalFindPage"
                                :biz-code="WxtBizCode.精准人群推广"
        />
        <WeatherRegionOptimization :rows="rows" @refresh="loadCampaignHorizontalFindPage"
                                   :biz-code="WxtBizCode.精准人群推广"
        />
        <TimeDiscount :rows="rows" :biz-code="WxtBizCode.精准人群推广" @refresh="loadCampaignHorizontalFindPage"/>
        <BudgetBiddingMethod :rows="rows" @refresh="loadCampaignHorizontalFindPage"
                             :biz-code="WxtBizCode.精准人群推广"
        />
        <PromotionStatus :rows="rows" @refresh="loadCampaignHorizontalFindPage" :biz-code="WxtBizCode.精准人群推广"/>
        <OperationRecords :rows="rows" :dates="dateRange" :biz-code="WxtBizCode.精准人群推广"/>
        <DeletePlan :rows="rows" @refresh="loadCampaignHorizontalFindPage" :biz-code="WxtBizCode.精准人群推广"/>
      </a-space>
    </a-col>
  </a-row>
  <a-row style="flex:1;">
    <AccurateCrowdPlanTable :date-range="dateRange" @refresh="loadCampaignHorizontalFindPage" :loading="loading"
                            :data="data"
                            v-model:rows="rows"
                            :staticAdPkgLists="adzoneList"
    />
  </a-row>
</template>

<style scoped>

</style>
